<template>
<div>
  <swiper loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange" height="10em"></swiper>
</div>
</template>
<script>
  import { Swiper, GroupTitle, SwiperItem, XButton, Divider } from 'vux'
  const baseList = [{
    url: 'javascript:',
    img: './static/assets/logo.png',
    title: '送你一朵fua'
  }, {
    url: 'javascript:',
    img: './static/assets/logo.png',
    title: '送你一辆车'
  }, {
    url: 'javascript:',
    img: './static/assets/logo.png',
    title: '送你一次旅行'
  }]

  const urlList = baseList.map((item, index) => ({
    url: 'http://m.baidu.com',
    img: item.img,
    title: `(可点击)${item.title}`
  }))
  export default{
    components: {
      Swiper,
      SwiperItem,
      GroupTitle,
      XButton,
      Divider
    },
    data(){
        return{
          demo06_list:urlList,
          demo06_index:0
        }
    },
    methods:{
      demo06_onIndexChange (index) {

        this.demo06_index = index
      },
    }

  }
</script>
<style scoped>
  .copyright {
    font-size: 12px;
    color: #ccc;
    text-align: center;
  }
  .text-scroll {
    border: 1px solid #ddd;
    border-left: none;
    border-right: none;
  }
  .text-scroll p{
    font-size: 12px;
    text-align: center;
    line-height: 30px;
  }
  .black {
    background-color: #000;
  }
  .title{
    line-height: 100px;
    text-align: center;
    color: #fff;
  }
  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  .vux-indicator.custom-bottom {
    bottom: 30px;
  }
  @-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
  .fadeInUp {
    animation-name: fadeInUp;
  }
  .swiper-demo-img img {
    width: 100%;
  }
</style>
